<template >
  <el-container id="app-container">
    <el-header>
      <my-header />
    </el-header>
    <el-container>
      <el-aside id="app-navigator">
        <navigator />
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang=ts>
import { defineComponent } from "vue";
// import Navigator from '/@/components/HomeNavigator.vue'
import Navigator from "/@/components/Navigator.vue";
// import About from "/@/components/About.vue";
import Header from "/@/components/Header.vue";

export default {
  components: {
    Navigator,
    "my-header": Header,
  },
};
</script>

<style>
html,
body,
#app,
#app-container {
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0px;
  /*外部间距也是如此设置*/
  margin: 0px;
  /*统一设置高度为100%*/
  height: 100%;
}
</style>

<style scoped>
.el-header,
.header {
  padding: 0;
}

.el-header {
  height: 37px !important;
}

.el-main {
  padding: 0 !important;
}

#app-navigator {
  background-color: #545c64;
  width: 200px !important;
}
</style>
